<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据库配置</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="container mt-5">
    <h2>数据库配置</h2>
    <form id="databaseConfigForm">
        <div class="form-group">
            <label for="dbType">数据库类型</label>
            <select class="form-control" id="dbType">
                <option value="mysql">MySQL</option>
                <option value="postgresql">PostgreSQL</option>
                <option value="oracle">Oracle</option>
            </select>
        </div>
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" class="form-control" id="username" placeholder="Enter username">
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" placeholder="Enter password">
        </div>
        <button type="button" class="btn btn-primary" id="testConnection">测试链接</button>
        <button type="button" class="btn btn-secondary" id="importData">导入</button>
    </form>
    <h2 class="mt-5">数据库表结构</h2>
    <table class="table table-striped" id="tableStructure">
        <thead>
        <tr>
            <th>表名</th>
            <th>字段名</th>
            <th>数据类型</th>
            <th>字段映射类型</th>
        </tr>
        </thead>
        <tbody>
        <!-- 表结构信息将动态插入到这里 -->
        </tbody>
    </table>
</div>

<script>
    $(document).ready(function() {
        $('#testConnection').click(function() {
            var dbType = $('#dbType').val();
            var username = $('#username').val();
            var password = $('#password').val();
            $.ajax({
                url: '/databases/test',
                type: 'POST',
                data: JSON.stringify({ dbType: dbType, username: username, password: password }),
                contentType: 'application/json',
                success: function(response) {
                    alert('连接成功');
                },
                error: function() {
                    alert('连接失败');
                }
            });
        });

        $('#importData').click(function() {
            var dbType = $('#dbType').val();
            var username = $('#username').val();
            var password = $('#password').val();
            $.ajax({
                url: '/databases/tables',
                type: 'POST',
                data: JSON.stringify({ dbType: dbType, username: username, password: password }),
                contentType: 'application/json',
                success: function(response) {
                    var tableBody = $('#tableStructure tbody');
                    tableBody.empty();
                    response.forEach(function(table) {
                        table.fields.forEach(function(field) {
                            tableBody.append('<tr><td>' + table.name + '</td><td>' + field.name + '</td><td>' + field.type + '</td><td><input type="text" class="form-control" placeholder="映射类型"></td></tr>');
                        });
                    });
                },
                error: function() {
                    alert('获取表结构失败');
                }
            });
        });
    });
</script>
</body>
</html>
